<template>
  <div class="dashboard">
    <!-- 头部 -->
    <el-header class="header">
      <div class="title">仓库管理系统看板</div>
    </el-header>

    <!-- 主体内容 -->
    <el-main class="main">
      <!-- 指标卡片 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div slot="header" class="card-header">总库存</div>
            <div class="card-content">{{ totalInventory }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div slot="header" class="card-header">待发货订单</div>
            <div class="card-content">{{ pendingOrders }}</div>
          </el-card>
        </el-col>
        <!-- 其他指标卡片 -->
      </el-row>

      <!-- 图表区域 -->
      <div class="chart-container">
        <el-card class="chart-card">
          <div slot="header" class="card-header">库存变化趋势</div>
          <div class="chart-content">
            <!-- 这里放置库存变化趋势的图表 -->
            <img src="chart_image_url" alt="Inventory Trend Chart">
          </div>
        </el-card>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalInventory: 1000, // 总库存
      pendingOrders: 20, // 待发货订单数量
      // 其他指标数据
    };
  },
  methods: {
    // 可以在这里添加获取数据的方法，如异步请求后端接口获取数据
  }
};
</script>

<style scoped>
.dashboard {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #409eff;
  color: #fff;
  padding: 0 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  line-height: 60px;
}

.main {
  flex: 1;
  padding: 20px;
}

.dashboard-card {
  text-align: center;
  height: 120px;
  line-height: 120px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}

.chart-container {
  margin-top: 20px;
}

.chart-card {
  height: 400px;
}
</style>
